<template>
  <div class="user-management">
    <el-form :inline="true" :model="userParam" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="userParam.username" placeholder="用户名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userParam.phone" placeholder="手机号" clearable />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userParam.email" placeholder="邮箱" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="userParam.status" placeholder="状态" style="width: 240px" clearable>
          <el-option
            v-for="item in userStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        <el-button type="primary" :icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-button type="primary" @click="handleDelete()">删除</el-button>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="status" label="状态" :formatter="userStatusFormatter" />、
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserDialog
      v-if="displayFlag"
      :displayFlag="displayFlag"
      :title="title"
      :userData="rowData"
    ></UserDialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'UserManagement',
}
</script>

<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { onBeforeMount, reactive, ref } from 'vue'
import { deleteUser, getUserList } from '@/http/api'
import type { UserParam } from '@/types/param'
import type { SysMenu, SysUser } from '@/types/index'
import UserDialog from '@/views/components/UserDialog.vue'
import emitter from '@/utils/emitter'
import { ElMessage } from 'element-plus'
import { userStatus } from '@/utils/dicts/user'

const displayFlag = ref(false)
const tableData = ref<SysUser[]>([])
const title = ref<string>('')
const deleteIds = ref<number[]>([])
const rowData = ref<SysUser>({
  id: null,
  username: null,
  avatar: null,
  phone: null,
  email: null,
  status: null,
})
const userParam = reactive<UserParam>({
  username: null,
  phone: null,
  email: null,
  status: null,
  pageNum: 1,
  pageSize: 10,
})

const search = () => {
  getUserList(userParam).then((res) => {
    tableData.value = res.data.records
  })
}
const reset = () => {
  userParam.username = null
  userParam.phone = null
  userParam.email = null
  userParam.status = null
}

const userStatusFormatter = (row: SysUser) => {
  const status = userStatus.value.find((item) => item.value === row.status)
  if (status) {
    return status.label
  } else {
    return row.status
  }
}
const handleAdd = () => {
  displayFlag.value = true
  title.value = '用户新增'
  rowData.value = {
    id: null,
    username: null,
    avatar: null,
    phone: null,
    email: null,
    status: 0,
  }
}
const handleEdit = (row: SysUser) => {
  displayFlag.value = true
  title.value = '用户修改'
  rowData.value = row
}
const handleSelectionChange = (dataArr: SysMenu[]) => {
  deleteIds.value = []
  if (dataArr.length === 0) {
    deleteIds.value = []
  } else {
    dataArr.forEach((item) => {
      deleteIds.value.push(item.id!)
    })
  }
}
const handleDelete = (id?: number) => {
  if (id) {
    deleteIds.value = []
    deleteIds.value.push(id)
  } else {
    if (deleteIds.value.length === 0) {
      ElMessage({
        message: '请选择要删除的数据！',
        type: 'warning',
      })
      return
    }
  }
  deleteUser(deleteIds.value)
    .then((res) => {
      deleteIds.value = []
      search()
    })
    .catch((err) => {
      console.log(err)
    })
}

// 绑定事件
emitter.on('update:displayFlag', (flag: boolean) => {
  displayFlag.value = flag
})
emitter.on('refresh:userTableData', () => {
  console.log('refresh:userTableData')
  getUserList(userParam)
    .then((res) => {
      tableData.value = res.data.records
    })
    .catch((err) => {
      console.log(err)
    })
})

onBeforeMount(() => {
  getUserList(userParam)
    .then((res) => {
      tableData.value = res.data.records
    })
    .catch((err) => {
      console.log(err)
    })
})
</script>

<style lang="scss" scoped>
.user-management {
  padding: 20px 20px 20px 20px;
}
</style>
